<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getElementsByClassName</title>
  </head>
  <body>
    <div class="outer">
      M2: document.getElementsByClassName
      <div class="inner">M2: outer.getElementsByClassName</div>
    </div>
    <script type="text/javascript">
      // 记得与querySelector区分, querySelector是类似css中的类名写法
      // 而使用getElementsByClassName只需要填写具体的类名
      // 返回的结果是一个HTMLCollection
      // elements: [div] -> 在document节点下只有一个类名为outer的元素
      var elements = document.getElementsByClassName('outer'),
        oOuter = elements[0],
        // 查找outer下所有类名为inner的元素
        outerElements = oOuter.getElementsByClassName('inner'),
        oInner = outerElements[0];
      // 打印结果: M2: outer.getElementsByClassName
      console.log(oInner.textContent);
    </script>
  </body>
</html>
